<template>
    <div>
        <el-radio-group v-model="couponType" class="choose-type">
            <el-radio-button label="满减券"></el-radio-button>
            <el-radio-button label="折扣券"></el-radio-button>
            <el-radio-button label="无门槛"></el-radio-button>
        </el-radio-group>
        <component :is="couponCom" ref="forms"/>

    </div>
</template>

<script>
    import PriceBreakCoupon from './priceBreakCoupon'
    import DiscountCoupon from './discountCoupon'
    import NoThresholdCoupon from './noThresholdCoupon'

    export default {
        name: "index",
        data(){
          return{
              couponType:"满减券"
          }
        },
        computed:{
            couponCom() {
                const statusMap = {
                     "满减券": PriceBreakCoupon,
                    "折扣券": DiscountCoupon,
                    "无门槛": NoThresholdCoupon
                }
                return statusMap[this.couponType]
            }
        },
        methods:{
            async validate() {
                return await this.$refs['forms'].validate();
            },
             getValue() {
               return  new Promise( (resolve)=>{
                        let formData = this.$refs['forms'].getValue();
                        resolve({couponType:this.couponType,formData:formData})
                });
            },
             setValue(data) {
                 this.couponType = data.couponType;
                 this.$nextTick(()=>{
                     this.$refs['forms'].setValue(data.formData);
                 })
            }
        }
    }
</script>

<style scoped>
.choose-type{
    margin-bottom: 20px;
}
</style>
